/* 
 *需求：点击账号 和 扫码 完成登录框和二维码的切换
 */
/* 注册事件 */
// let li1 = $('#li1')
// console.log(li1);
// let li2 = $('#li2')
// console.log(li2);

// let div1 = $('#div1')
// console.log(div1);
// let div2 = $('#div2')
// console.log(div2);
$('#li1').addEventListener('click', function(v, i) {
    $('#div1').style.display = 'block';
    $('#div2').style.display = 'none';
    $('#li2').style.color = '#000';
    $('#li1').style.color = '#1ca8ef';
    $('.s2').style.display = 'none'
    $('.s1').style.display = 'block'
})
$('#li2').addEventListener('click', function(v, i) {
    $('#div2').style.display = 'block';
    $('#div1').style.display = 'none';
    $('#li2').style.color = '#1ca8ef';
    $('#li1').style.color = '#000';
    $('.s1').style.display = 'none'
    $('.s2').style.display = 'block'
})

/*需求 ：设置登录页面相关要求，账号格式，密码格式 */

/* 账号框有内容输入时，同时弹出后面的小x图案，
 *点击图案清空账号框内容，自己也隐藏，
 */
$('.zh').addEventListener('input', function() {
    if ($('.zh').value.length > 0) {
        $('.x1').style.display = 'block'
    } else {
        $('.x1').style.display = 'none'
    }
})
$('.x1').addEventListener('click', function() {
    $('.zh').value = ''
    $('.x1').style.display = 'none'
})

/* 密码框同理可得 */
$('.password').addEventListener('input', function() {
    if ($('.password').value.length > 0) {
        $('.x2').style.display = 'block'
    } else {
        $('.x2').style.display = 'none'
    }
})
$('.x2').addEventListener('click', function() {
    $('.password').value = ''
    $('.x2').style.display = 'none'
})

/* 定义账号合法性，不合法弹出相应提示，合法则不弹出提示 */
let num = /^1[|3|4|5|6|7|8|9|][0-9]{9}$/
$('.zh').addEventListener('blur', function() {
        let bool = num.test(this.value)
        if (bool) {
            $('.zh-ts').textContent = ''
        } else {
            $('.zh-ts').textContent = '请输入正确的手机号码'
        }
    })
    /* 密码同理 */
let pnum = /[0-9]{6}$/
$('.password').addEventListener('blur', function() {
    let bool = pnum.test(this.value)
    if (bool) {
        $('.ma-ts').textContent = ''
    } else {
        $('.ma-ts').textContent = '请输入6位数字密码'
    }
})

/* 在电话号码和密码都符合要求的前提下，点击登录按钮，实现跳转
 *否则，阻止跳转 e.preventDefault();
 */
$('.fa').addEventListener('submit', function(e) {
    if (!num.test($('.zh').value)) {
        $('.zh-ts').textContent = '请输入正确的手机号码';
        e.preventDefault(); //阻止页面跳转
    } else if (!pnum.test($('.password').value)) {
        $('.ma-ts').textContent = '请输入6位数字密码';
        e.preventDefault();
    }
})